<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import ConfigurableTable from '@/components/ConfigurableTable.vue'
import type { ExtendedColumnConfig } from '@/types/table'

const styles = ['success', 'danger', 'info', 'warning', 'danger', 'danger', 'danger', 'danger']

// 表格引用
const configurableTableRef = ref<InstanceType<typeof ConfigurableTable>>()

// 列配置
const columns: ExtendedColumnConfig[] = [
  { type: 'checkbox', width: 50, fixed: 'left', visible: true, sortIndex: 1 },
  { type: 'seq', title: '序号', width: 50, fixed: 'left', visible: true, sortIndex: 2 },
  {
    title: '入园单号',
    field: 'entryRegisterNo',
    width: 180,
    fixed: 'left',
    visible: true,
    sortIndex: 3,
  },
  { title: '入园时间', field: 'entryTime', width: 180, fixed: 'left', visible: true, sortIndex: 4 },
  { title: '离园时间', field: 'outTime', width: 150, fixed: 'left', visible: true, sortIndex: 5 },
  {
    title: '状态',
    field: 'status',
    width: 100,
    slots: { default: 'status' },
    visible: true,
    sortIndex: 6,
  },
  {
    title: '关联单据',
    field: 'sourceSettingId',
    width: 100,
    slots: { default: 'sourceSettingId' },
    visible: true,
    sortIndex: 7,
  },
  {
    title: '图片',
    field: 'image',
    width: 180,
    align: 'left',
    headerAlign: 'center',
    slots: { default: 'image' },
    visible: true,
    sortIndex: 8,
  },
  { title: '司机姓名', field: 'driverName', width: 100, visible: true, sortIndex: 9 },
  { title: '司机电话', field: 'driverPhone', width: 150, visible: true, sortIndex: 10 },
  { title: '车牌号', field: 'vehicleLicensePlate', width: 100, visible: true, sortIndex: 11 },
  {
    title: '车辆净重',
    field: 'bak5',
    width: 100,
    slots: { default: 'bak5' },
    visible: true,
    sortIndex: 12,
  },
  {
    title: '车辆毛重',
    field: 'roughWeight',
    width: 100,
    slots: { default: 'roughWeight' },
    visible: true,
    sortIndex: 13,
  },
  {
    title: '车辆皮重',
    field: 'tare',
    width: 100,
    slots: { default: 'tare' },
    visible: true,
    sortIndex: 14,
  },
  {
    title: '粮食',
    field: 'bak1',
    width: 100,
    slots: { default: 'bak1' },
    visible: true,
    sortIndex: 15,
  },
  {
    title: '批文',
    field: 'turnLot',
    minWidth: 170,
    slots: { default: 'turnLot' },
    visible: true,
    sortIndex: 16,
  },
  {
    title: '上游单据',
    field: 'frontNo',
    width: 250,
    slots: { default: 'frontNo' },
    visible: true,
    sortIndex: 17,
  },
]

// 表格数据
const tableData = [
  {
    id: '1952023186307710977',
    entryRegisterNo: 'ER0522508030001',
    status: '1',
    driverName: '许红林',
    driverIdCard: '530324198712200535',
    driverPhone: '15974628609',
    vehicleLicensePlate: '云AM1198',
    sourceSettingId: '1',
    storehouseName: '广州市粮食集团有限责任公司储备分公司海珠粮库',
    entryTime: '2025-08-03 23:05:56',
    frontNo: 'M25044-1-1-1',
    behindNo: 'PIW05220250803001',
    bak1: '2360000',
    imageCount: '0',
    listCount: '0',
    behindId: '1952023192762744834',
    turnLot: 'CLF0124GZ05ZC78',
  },
  {
    id: '1951095132320374785',
    entryRegisterNo: 'ER0522508010004',
    status: '1',
    driverName: '王忠',
    driverIdCard: '352202197011275710',
    driverPhone: '13706021361',
    vehicleLicensePlate: '万218',
    sourceSettingId: '1',
    storehouseName: '广州市粮食集团有限责任公司储备分公司海珠粮库',
    entryTime: '2025-08-01 09:38:00',
    frontNo: '011A171101-1-1-1',
    behindNo: 'PIW05220250801004',
    bak1: '1110000',
    bak5: '998000.0',
    imageCount: '0',
    listCount: '1',
    behindId: '1951095158836764673',
    roughWeight: '998000',
    tare: '0',
    suttle: '998000',
    turnLot: 'GZPX22002',
  },
  {
    id: '1951089497226813441',
    entryRegisterNo: 'ER0522508010003',
    status: '1',
    driverName: '郭红林',
    driverIdCard: '530424198705100013',
    driverPhone: '19987710878',
    vehicleLicensePlate: '云AJ2119',
    sourceSettingId: '1',
    storehouseName: '广州市粮食集团有限责任公司储备分公司海珠粮库',
    entryTime: '2025-08-01 09:14:32',
    frontNo: '011A171101-1-1-1',
    behindNo: 'PIW05220250801003',
    bak1: '1110000',
    bak5: '1000.0',
    imageCount: '0',
    listCount: '1',
    behindId: '1951089509625176066',
    roughWeight: '1000',
    tare: '0',
    suttle: '1000',
    turnLot: 'GZPX22002',
  },
]

/**
 * 处理列宽调整事件
 */
const handleColumnResize = (params: any) => {
  console.log('列宽调整:', params)
}

/**
 * 模拟数据加载
 */
const loadData = async () => {
  // 开始加载
  configurableTableRef.value?.setLoadingData(true)

  try {
    // 模拟异步数据加载
    await new Promise((resolve) => setTimeout(resolve, 2000))
    console.log('数据加载完成')
  } finally {
    // 结束加载
    configurableTableRef.value?.setLoadingData(false)
  }
}

/**
 * 获取表格状态
 */
const getTableStates = () => {
  const isLoadingData = configurableTableRef.value?.isLoadingData
  const currentColumns = configurableTableRef.value?.currentColumns

  console.log('数据加载状态:', isLoadingData)
  console.log('当前列配置:', currentColumns)
}

onMounted(() => {
  nextTick().finally(() => {
    console.log('表格引用:', configurableTableRef.value?.tableRef) // 这是 VxeGridInstance
    console.log('组件引用:', configurableTableRef.value) // 这是 ConfigurableTable 实例
  })
})
</script>

<template>
  <div class="model">
    <div class="table-container">
      <ConfigurableTable
        ref="configurableTableRef"
        :columns="columns"
        :data="tableData"
        height="100%"
        @column-resize="handleColumnResize"
      >
        <template #status="{ row }">
          <el-tag type="success">
            {{ row.status }}
          </el-tag>
        </template>
        <template #sourceSettingId="{ row }">
          <el-tag type="success">
            {{ row.sourceSettingId }}
          </el-tag>
        </template>
        <template #image="{ row }">
          <span style="color: #999; font-weight: 400; margin: 0 5px">
            ({{ row.imageCount ?? 0 }}/11)
          </span>
          <span style="color: #999; font-weight: 400"> ({{ row.listCount ?? 0 }}/1) </span>
        </template>
        <template #bak5="{ row }">
          <span>{{ row.bak5 }}</span>
        </template>
        <template #roughWeight="{ row }">
          <span>{{ row.roughWeight }}</span>
        </template>
        <template #tare="{ row }">
          <span>{{ row.tare }}</span>
        </template>
        <template #bak1="{ row }">
          <el-tag type="success">
            {{ row.bak1 }}
          </el-tag>
        </template>
        <template #turnLot="{ row }">
          <el-tag
            v-for="(item, index) in row.turnLot.split(',')"
            :type="styles[index] || 'default'"
            :key="index"
          >
            {{ item }}
          </el-tag>
        </template>
        <template #frontNo="{ row }">
          <el-tag
            v-for="(item, index) in row.frontNo.split(',')"
            :type="styles[index] || 'default'"
            :key="index"
          >
            {{ item }}
          </el-tag>
        </template>
      </ConfigurableTable>
    </div>
  </div>
</template>

<style scoped lang="scss">
.model {
  margin: 20px;
  height: 500px;

  .table-container {
    height: 100%;
  }
}
</style>
